<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Refresh" content="30">
<title>菜鸟教程</title>
    <script>
		function displayDate(){
			document.getElementById("demo").innerHTML=Date();/*获取时间*/
		}
		function myfunction(){
			x=document.getElementById("demo1");//找到元素
			x.innerHTML="Hello World";//改变内容
		}
		function changeImage()
        {
            element=document.getElementById('myimage')
            if (element.src.match("bulbon"))
            {
                element.src="../Images/pic_bulboff.gif";
            }
            else
            {
                element.src="../Images/pic_bulbon.gif";
            }
        }
		function myFunction1(){
			x=document.getElementById("demo2");//查找元素
			x.style.color="#ff0000";
		}
		function myFunction3(){
            var x=document.getElementById("demo3").value;
            if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
            alert("不是数字");
            }
        }
	</script>
</head>

<body>
	<p>请输入数字，如果输入值不是数字，浏览器会弹出提示框</p>
	<input id="demo3" type="text">
	<button type="button" onclick="myFunction3">点这提交数字</button>
	<p id="demo2">改变HTML样式</p>
	<button type="button" onclick="myFunction1()">点这修改颜色</button>
	<img id="myimage" onClick="changeImage()" src="../Images/pic_bulboff.gif" width="100px" height="180px">
	<p>点击灯泡就可以打开或者关闭这盏灯</p>
	<p id="demo1">Java能够改变HTML元素的内容</p>
	<button type="button" onclick="myfunction()">点我修改</button>
	<button type="button" onclick="alert('欢迎！')">点我</button><!--JavaScript能够对事件作出反应。比如对按钮的反应-->
	<p>JavaScript能够直接写入HTML输出流中</p>
	<script>
		element=document.getElementById('myimage')
			if(element.src.math("bulbon"))
				{
					element.src="../Images/pic_bulboff.gif";
				}
			else
				{
					element.src="../Images/pic_bulbon.gif"
				}
		document.write("<h1>这是一个标签</h1>");/*直接写入HTML输入流*/
		document.write("<p>这是一个段落</p>");
	</script>
	<h1>这是我的第一个JavaScript程序</h1>
	<p id="demo">这是一个段落</p>
	<button type="button" onClick="displayDate()">显示日期</button>
</body>
</html>
